<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="searchBody">
      <el-card shadow="hover" style="margin-top: 40px;text-align: center;border-radius: 15px 15px 0 0">
        <el-input placeholder="请输入内容" v-model="searchKey" @keyup.enter.native="musicSearch()" style="width: 60%;"
                  size="medium">
          <el-select v-model="searchType" slot="prepend">
            <el-option label="歌曲" value="1"></el-option>
            <el-option label="歌手" value="2"></el-option>
            <el-option label="用户" value="3"></el-option>
            <el-option label="歌单" value="4"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="musicSearch()"></el-button>
        </el-input>
      </el-card>
      <el-card shadow="none" style="border-radius: 0 0 15px 15px">
        <div slot="header" class="clearfix">
          <span>搜索内容为：{{searchKeyV2}} 以下为您找到的{{searchText}}信息</span>
        </div>
        <!--歌曲-->
        <div v-if="searchTypeV2==='1'">
          <el-table :data="searchMusicList.slice((currentPage-1)*20,((currentPage-1)*20+20))"
                    style="width: 100%"
                    element-loading-text="Loading..."
                    element-loading-svg-view-box="-10, -10, 50, 50">
            <el-table-column prop="audioName" label="歌曲名" width="600"/>
            <el-table-column prop="component" width="270" label="操作">
              <template slot-scope="scope">
                <el-link :underline="false" v-show="true" @click="toPlayMusic(scope.$index)">
                  <i class="iconfont icon-bofangsanjiaoxing"></i>
                </el-link>
                &nbsp;&nbsp;&nbsp;
                <el-link :underline="false" v-show="true" @click="toPlayMusicComment(scope.$index)">
                  <i class="iconfont icon-xiaoxi"></i>
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="timeLength" label="时长"/>
          </el-table>
          <el-pagination
            style="text-align: center;margin-top: 20px"
            :page-size="20"
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="searchMusicList.length">
          </el-pagination>
        </div>
        <!--歌手-->
        <div v-if="searchTypeV2==='2'">
          <el-table :data="searchSingerList.slice((currentPage-1)*20,((currentPage-1)*20+20))"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="Loading..."
                    element-loading-svg-view-box="-10, -10, 50, 50">
            <el-table-column prop="imgUrl" label="头像" width="300">
              <template slot-scope="scope">
                <el-link :underline="false" @click="toSingerDetail(scope.row.id)">
                  <el-image :src="scope.row.imgUrl" style="width: 100px;height: 100px"></el-image>
                </el-link>

              </template>
            </el-table-column>
            <el-table-column prop="singerName" label="歌手名" width="350"/>
            <el-table-column prop="songCount" label="歌曲" width="150"/>
            <el-table-column prop="albumCount" label="专辑" width="150"/>
          </el-table>
          <el-pagination
            style="text-align: center;margin-top: 20px"
            :page-size="20"
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="searchSingerList.length">
          </el-pagination>
        </div>
        <!--用户-->
        <div v-if="searchTypeV2==='3'">
          <el-table :data="searchUserList.slice((currentPage-1)*20,((currentPage-1)*20+20))"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="Loading..."
                    element-loading-svg-view-box="-10, -10, 50, 50">
            <el-table-column prop="imgUrl" label="头像" width="300">
              <template slot-scope="scope">
                <el-link :underline="false" @click="toUserDetail(scope.row.id)">
                  <el-image :src="scope.row.headerImg" style="width: 100px;height: 100px"></el-image>
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="150"/>
            <el-table-column prop="personalSignature" label="个性签名" width="200"/>
            <el-table-column prop="sex" label="性别" width="150"/>
            <el-table-column prop="age" label="年龄" width="150"/>
          </el-table>
          <el-pagination
            style="text-align: center;margin-top: 20px"
            :page-size="20"
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="searchUserList.length">
          </el-pagination>
        </div>
        <!--歌单-->
        <div v-if="searchTypeV2==='4'">
          <el-table :data="searchSheetList.slice((currentPage-1)*20,((currentPage-1)*20+20))"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="Loading..."
                    element-loading-svg-view-box="-10, -10, 50, 50">
            <el-table-column prop="imgUrl" label="歌单封面" width="300">
              <template slot-scope="scope">
                <el-link :underline="false" @click="toMusicSheetDetail(scope.row.id)">
                  <el-image :src="scope.row.imgUrl" style="width: 100px;height: 100px"></el-image>
                </el-link>

              </template>
            </el-table-column>
            <el-table-column prop="specialName" label="歌单名" width="300"/>
            <el-table-column prop="userName" label="创建人" width="200"/>
            <el-table-column prop="playCount" label="热度" width="150"/>
          </el-table>
          <el-pagination
            style="text-align: center;margin-top: 20px"
            :page-size="20"
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="searchSheetList.length">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!--展示问题反馈icon-->
    <div class="problem">
      <el-popover
        placement="left"
        width="400"
        trigger="click">
        <el-form ref="problemForm" :model="problemForm" label-width="80px" :rules="problemFormRules">
          <el-form-item label="联系方式" prop="information">
            <el-input v-model="problemForm.information" size="mini" placeholder="手机号码\微信号\邮箱" maxlength="50"
                      show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="遇到问题" prop="problemDescription">
            <el-input v-model="problemForm.problemDescription" placeholder="请描述你遇到的问题，例如歌曲搜索不到" type="textarea"
                      size="mini" :autosize="{ minRows: 2, maxRows: 4}" maxlength="500" show-word-limit></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button type="primary" round size="mini" @click="submitProblem('problemForm')">提交问题</el-button>
          </el-form-item>
        </el-form>
        <el-link :underline="false"
                 slot="reference">
          <i class="iconfont icon-bangzhu" style="font-size: 40px"></i>
        </el-link>
      </el-popover>
    </div>
  </div>
</template>

<script>
  import header from "../layout/Header";
  import footer from "../layout/Footer";
  import menu from "../layout/Menu";

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "Search",
    data() {
      return {
        searchKey: '',
        searchKeyV2: '',
        searchText: '',
        currentPage: 1,
        searchType: '1',
        searchTypeV2: '1',
        searchMusicList: [],
        searchSingerList: [],
        searchUserList: [],
        searchSheetList: [],
        problemVisible: false,
        problemForm: {
          information: '',
          problemDescription: '',
        },
        problemFormRules: {
          information: [
            {required: true, message: '请输入联系方式', trigger: 'blur'},
            {max: 50, message: '长度小于 50 个字符', trigger: 'blur'}
          ],
          problemDescription: [
            {required: true, message: '请输入问题描述', trigger: 'blur'},
            {max: 500, message: '长度小于 500 个字符', trigger: 'blur'}
          ],
        }
      }
    },
    created() {
      document.title = '搜索';
      this.searchKey = this.$route.query.searchKey;
      this.searchTypeV2 = this.$route.query.searchType;
      this.selectType(this.searchTypeV2);
    },
    mounted() {
    },
    methods: {
      submitProblem(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid && this.problemForm.information.split(" ").join("").length !== 0 && this.problemForm.problemDescription.split(" ").join("").length !== 0) {
            this.$axios({
              method: 'post',
              url: '/user/before/addProblem',
              data: {
                information: this.problemForm.information,
                problemDescription: this.problemForm.problemDescription
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$notify({
                  title: '提示',
                  message: '提交成功，感谢反馈',
                  type: 'success'
                });
                this.problemForm.information = '';
                this.problemForm.problemDescription = '';
              } else {
                this.$notify({
                  title: '提示',
                  message: '提交失败，请稍后再试',
                  type: 'warning'
                });
              }
            })
          } else {
            this.$notify({
              title: '警告',
              message: '不能为空哦',
              type: 'warning'
            });
          }
        });
      },
      musicSearch() {
        if (this.searchKey.split(" ").join("").length === 0) {
          this.$message({
            showClose: true,
            message: '你搜索的是空白哦',
            type: 'info'
          })
        } else {
          if (this.searchType === '1') {
            this.searchText = '歌曲';
            this.searchMusic(this.searchKey);
          } else if (this.searchType === '2') {
            this.searchText = '歌手';
            this.searchSinger(this.searchKey);
          } else if (this.searchType === '3') {
            this.searchText = '用户';
            this.searchUser(this.searchKey);
          } else if (this.searchType === '4') {
            this.searchText = '歌单';
            this.searchSheet(this.searchKey);
          }
          this.searchTypeV2 = this.searchType;
          this.searchKeyV2 = this.searchKey;
        }

      },
      //分页
      handleCurrentChange(item) {
        this.currentPage = item;
      },
      //判断用户选择的是什么类型的搜索
      selectType(searchType) {
        if (searchType === '1') {
          this.searchText = '歌曲';
          this.searchMusic(this.searchKey);
        } else if (searchType === '2') {
          this.searchText = '歌手';
          this.searchSinger(this.searchKey);
        } else if (searchType === '3') {
          this.searchText = '用户';
          this.searchUser(this.searchKey);
        } else if (searchType === '4') {
          this.searchText = '歌单';
          this.searchSheet(this.searchKey);
        }
        this.searchType = this.searchTypeV2;
      },
      //搜索歌单
      searchSheet(searchKey) {
        this.$axios({
          method: 'post',
          url: '/search/sheet/' + searchKey
        }).then(res => {
          this.searchSheetList = res.data.data.info;
        })
      },
      //搜索用户
      searchUser(searchKey) {
        this.$axios({
          method: 'post',
          url: '/search/user/' + searchKey
        }).then(res => {
          this.searchUserList = res.data.data.info;
        })
      },
      //搜索歌手
      searchSinger(searchKey) {
        this.$axios({
          method: 'post',
          url: '/search/singer/' + searchKey
        }).then(res => {
          this.searchSingerList = res.data.data.info;
        })
      },
      //搜索音乐
      searchMusic(searchKey) {
        this.$axios({
          method: 'post',
          url: '/search/music/' + searchKey
        }).then(res => {
          this.searchMusicList = res.data.data.info;
        })
      },
      //跳转歌单
      toMusicSheetDetail(item) {
        let routeUrl = this.$router.resolve({
          path: '/musicSheetDetail',
          query: {
            id: item
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //跳转用户细节
      toUserDetail(userId) {
        let token = sessionStorage.getItem('token');
        if (token === undefined || token === '' || token === null) {
          this.$message({
            showClose: true,
            message: '您还未登录，请登录后查看',
            type: 'info'
          })
        } else {
          let routeUrl = this.$router.resolve({
            path: '/userDetail',
            query: {
              userId: userId
            }
          });
          window.open(routeUrl.href, '_blank');
        }

      },
      //跳转歌手详情
      toSingerDetail(item) {
        let routeUrl = this.$router.resolve({
          path: '/singerDetail',
          query: {
            id: item
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //跳转到评论
      toPlayMusicComment(index) {
        let routeUrl = this.$router.resolve({
          path: '/playMusicComment',
          query: {
            hash: this.searchMusicList[index].hash,
            albumId: this.searchMusicList[index].albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //播放音乐
      toPlayMusic(res) {
        let routeUrl = this.$router.resolve({
          path: '/playMusic',
          query: {
            hash: this.searchMusicList[res].hash,
            albumId: this.searchMusicList[res].albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.searchMusicList
          }
        }).then(res => {
          console.log(res.data);
          window.open(routeUrl.href, '_blank');
        });
      },
    }
  }
</script>

<style scoped>
  .searchBody {
    width: 1000px;
    margin: 0 auto;
  }

  /deep/ .el-select {
    width: 80px;
  }

  .problem {
    position: fixed;
    right: 10px;
    bottom: 0;
    overflow: hidden;
    padding: 30px;
  }
</style>
